<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="支付方式"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 支付方式选择组件 -->
            <div class="pay-methods-box">
                <div class="pay-methods">
                    <img
                        class="pay-icon"
                        src="../../assets/images/orderConfirm/wx-pay.png"
                    />
                    <span class="pay-name">微信支付</span>
                    <common-radio
                        radioName="payMethods"
                        @radioClick="radioClick('wxPay')"
                        checked="checked"
                    ></common-radio>
                </div>
                <div class="pay-methods">
                    <img
                        class="pay-icon"
                        src="../../assets/images/orderConfirm/change-pay.png"
                    />
                    <span class="pay-name">余额支付</span>
                    <common-radio
                        radioName="payMethods"
                        @radioClick="radioClick('changePay')"
                    ></common-radio>
                </div>
            </div>
            <!-- 支付方式选择组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 支付按钮组件 -->
        <div
            class="pay-btn"
            @click="goPay"
        >确认支付 ￥{{totalPrice | currency}}</div>
        <!-- 支付按钮组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import CommonRadio from '@/components/Radio'
export default {
    name: 'GoPay',
    components: {
        CommonHeader,
        CommonScroll,
        CommonRadio
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.31rem'
            },
            totalPrice: 0,
            payMethods: 'wxPay',
            wxPayParams: '',
            isLoading: false
        }
    },
    mounted() {
        if (sessionStorage.getItem('cart_price')) {
            this.totalPrice = JSON.parse(sessionStorage.getItem('cart_price'))
        } else {
            this.$router.push('/')
        }
    },
    methods: {
        goPay() {
            if (this.payMethods == '') {
                this.commonDialog.alert('提示', '请选择支付方式！')
                return
            }
            if (this.isLoading) {
                this.commonDialog.alert('提示', '支付中，请勿重复支付！')
                return
            }
            this.isLoading = true
            const that = this
            if (this.payMethods == 'wxPay') {
                const that = this
                let postData = this.qs.stringify({
                    order_id: this.$route.query.orderId
                })
                this.axios.post('/api/wechat/pay.json', postData).then(res => {
                    const data = res.data
                    this.isLoading = false
                    if (data.status == 1) {
                        this.wxPayParams = data.data
                        if (typeof WeixinJSBridge == 'undefined') {
                            if (document.addEventListener) {
                                document.addEventListener(
                                    'WeixinJSBridgeReady',
                                    onBridgeReady,
                                    false
                                )
                            } else if (document.attachEvent) {
                                document.attachEvent(
                                    'WeixinJSBridgeReady',
                                    onBridgeReady
                                )
                                document.attachEvent(
                                    'onWeixinJSBridgeReady',
                                    onBridgeReady
                                )
                            }
                        } else {
                            that.onBridgeReady()
                        }
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            } else if (this.payMethods == 'changePay') {
                let postData = this.qs.stringify({
                    order_id: this.$route.query.orderId
                })
                this.axios.post('/api/pay/wallet.json', postData).then(res => {
                    const data = res.data
                    this.isLoading = false
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '余额支付成功！',
                            function() {
                                that.$router.push({
                                    path: '/orderList',
                                    query: { orderType: 2 }
                                })
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            }
        },
        onBridgeReady() {
            const that = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                this.wxPayParams,
                function(res) {
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        let postData = that.qs.stringify({
                            order_id: that.$route.query.orderId
                        })
                        that.axios.post('/api/orders/bonus.json')
                        that.axios
                            .post('/api/orders/prepaid.json', postData)
                            .then(res => {
                                const data = res.data
                                if (data.status == 1) {
                                    sessionStorage.removeItem('cart_price')
                                    that.$router.push({
                                        path: '/orderList',
                                        query: { orderType: 2 }
                                    })
                                } else {
                                    that.commonDialog.alert('提示', data.msg)
                                }
                            })
                    }
                }
            )
        },
        radioClick(value) {
            this.payMethods = value
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.pay-methods-box
    padding-left 0.26rem
    margin-top 0.18rem
    background #fff
    .pay-methods
        display flex
        align-items center
        height 1.6rem
        padding-right 0.26rem
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
        .pay-icon
            height 0.8rem
        .pay-name
            flex 1
            padding 0 0.18rem
            font-size 0.33rem
            color #333
    .pay-methods:last-child
        border none
.pay-btn
    position absolute
    bottom 0
    left 0
    right 0
    line-height 1.3rem
    text-align center
    font-size 0.38rem
    color #fff
    background #d7463c
</style>
